12. Controlled Components

Controlled Components

React Developer Tools

While building React apps, it may be tricky at times to see exactly is going on in your components. After all, with so many props being passed and accessed, numerous nested components, and all the JSX yet to be rendered as HTML, it can be tough to put things into perspective!

React Developer Tools allows you to inspect your component hierarchy along with their respective props and states. Once you install the Chrome extension, open the Chrome console and check out the React tab. For a detailed overview, feel free to check out the official documentation.

Let's see it in action below!

The Search Field A Controlled Component

Note that the value attribute is set on the <input> element. Since the displayed value will always be the value in the component's state, we can treat state, then, as the "single source of truth" for the form's state.

To recap how user input affects the ListContacts component's own state:

  1. The user enters text into the input field.
  • The onChange event listener invokes the updateQuery() function.
  • updateQuery() then calls setState(), merging in the new state to update the component's internal state.
  • Because its state has changed, the ListContacts component re-renders.

Let's see how we can leverage this updated state to filter our contacts. To help us with our filtering we'll need the following packages:

npm install --save escape-string-regexp sort-by

What is a Controlled Component?

What is a Controlled Component?
SOLUTION:
  • A component which renders a form, but the source of truth for that form state lives inside of the component state rather than inside of the DOM

Display Queried Contacts

Controlled Components vs “uncontrolled” components?

Which benefit applies to Controlled Components that doesn't apply to "uncontrolled" components?
SOLUTION: Controlled Components allow you to update your UI based on the form itself

Showing The Displayed Contacts Count

We're almost done working with the controlled component! Our last step is to make our app display the count of how many contacts are being displayed out of the overall total.

Add The Now Showing Details

Do you feel comfortable with Controlled Components? If not, check out the documentation to see another example. We'll get some practice with Controlled Components shortly.

Controlled Components

Before we head into the next Lesson, let's check in on our knowledge of Controlled Components!

Which of the following is true about Controlled Components? Please check all that apply:
SOLUTION:
  • Each update to state has an associated handler function
  • Form elements receive their current value via an attribute
  • Form input values are generally stored in the component's state
  • Event handlers for a controlled element update the component's state

Controlled Components Recap

Controlled components refer to components that render a form, but the "source of truth" for that form state lives inside of the component state rather than inside of the DOM. The benefits of Controlled Components are:

  • instant input validation
  • conditionally disable/enable buttons
  • enforce input formats

In our ListContacts component, not only does the component render a form, but it also controls what happens in that form based on user input. In this case, event handlers update the component's state with the user's search query. And as we've learned: any changes to React state will cause a re-render on the page, effectively displaying our live search results.

Next Concept